<template>
  <div>
   
      <ul class="top">
        <li :class="bool?'text':''" @click="text()">推荐</li>
        <li  :class="bool?'':'text'" @click="text()">最新</li>
        <li >话题</li>
        <li >快看</li>
        <li >点评</li>
        <li ><span class="iconfont icon-31wodexuanzhong"></span></li>
      </ul>
      <div class="second">
        <span>发现</span>
        <span>杭州</span>
        <span>西安</span>
      </div>
  <Tuijian/>
  <Tuijian/>
    <Nav/>
  </div>
</template>

<script>
import Tuijian from "../circle/component/tuijian.vue"
import Nav from "@/components/bottomnav.vue"
export default {
  components:{
    Nav,
    Tuijian
  },
  data() {
    return {
      bool:true
    }
 
  },
  methods: {
    text(){
      this.bool=!this.bool
    }
  },
}
</script>

<style scoped>
.top{
  width: 100%;
  height: .5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f6f6f6;
}
.top li{
  font-weight: 800;
}
.text{
  color:#61af5b ;
}
.second{
  width: 100%;
  height: .5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f6f6f6;
}
.second span{
  display: inline-block;
  border: 1px solid transparent;
  width: 50px;
  height: 25px;
  text-align: center;
  border-radius: 10px;
  background-color:#61af5b ;
  margin-left: 20px;
  color: #fff;
}

</style>